<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>对战房间</title>
  <link rel="stylesheet" href="css/common.css">
  <link rel="stylesheet" href="css/fight_room.css">
  <script src="js/jquery.min.js"></script>
  <style>
    /*input::-webkit-input-placeholder {*/
    /*  color: #cccccc;*/
    /*  font-size: 14px;*/
    /*}*/


  </style>
</head>

<body>
<!-- 导航栏 -->
<div class="nav">
  <a href="#" class="title">分歧终端机</a>
  <!-- 用来占据中间位置 -->
  <span class="spacer"></span>
  <a href="game_hall.html">游戏大厅</a>

  <a href="index.html">注销</a>
  <!-- <a href="#">注销</a> -->
</div>
<!--整个页面的容器元素-->
<div>
  <!-- <div> -->
    <!--  显示区域  -->
    <!-- <div id="screen2"> 等待玩家连接中...|</div> -->
    <!--  棋盘区域,需要基于canvas进行实现  -->
    <!-- <canvas id="chess" width="450px" height="450px"></canvas> -->
    <!--  显示区域  -->
    <!-- <div id="screen">等待玩家连接中...</div> -->
  <!-- </div> -->
<!-- </div> -->

<!-- 主界面 -->
<!-- <div id = "bifen" class="bifen">
 <div id="score1" class="score1"><h2>2</h2></div>
	<div id="maohao" class="maohao"><h2>:</h2></div> 
 <div id="score2" class="score2"><h2>1</h2></div>
</div> -->
<div id="yonghu">

</div>
<div id = "duizhan" class="duizhan">
	<div id="player1" class="playar">
		<img id="image" src="img/jiandao.png">
    <div id="button" class="button">
      <!-- <form id="myForm"> -->
      <div class="form-group">  
      <input type="radio" name="option" value="1" onclick="changeImage('img/jiandao.png')">
      <label for="option1" >剪刀</label><br>
      </div>
    
      <div class="form-group">
      <input type="radio" name="option" value="2" onclick="changeImage('img/shitou.png')">
      <label for="option2" >石头</label><br>
      </div>

      <div class="form-group">
      <input type="radio" name="option" value="3" onclick="changeImage('img/bu.png')">
      <label for="option3">布</label><br>
      </div>
    
      <input type="submit" value="提交" id="chushou" onclick="submitForm()">
      <!-- </form> -->
    </div>
	</div>
	<div id="player2" class="player">
    <!-- <h1 id="jiazai">等待对方出手...</h1> -->
    <img id="jiazai" src="img/deng.png">
		<!-- <img src="../../../../../../石头.JPG" -->
	</div>
</div>

<script>

  // let gameInfo = {
  //   roomId: null,
  //   thisUserId: null,
  //   thatUserId: null,
  //   isWhite: true,
  // }

  // 更换图片操作
  function changeImage(newImageUrl) {
    var image = document.getElementById('image');
    // debugger
    image.src = newImageUrl;
    // console.log(newImageUrl);
  }
  //////////////////////////////////////////////////
  // 设定界面显示相关操作
  //////////////////////////////////////////////////

  // function setScreenText(me) {
  //   let screen = document.querySelector('#screen');
  //   if (me) {
  //     screen.innerHTML = "轮到你下棋";
  //     // //开始计时 -- 步时
  //     // console.log("当前步开始计时");
  //     // // 每局倒计时开启 10 分钟 结束后平局
  //     // let stepTime = setTimeout(function () {
  //     //   //平局
  //     //   let request = {
  //     //     message: "deuce",
  //     //     userId: gameInfo.thisUserId,
  //     //     row: -1,
  //     //     col: -1
  //     //   }
  //     //   websocket.send(JSON.stringify(request));
  //     // },600000);
  //     // //100000 10分钟
  //   } else {
  //     screen.innerHTML = "轮到对方下棋";
  //   }
  // }

  // //////////////////////////////////////////////////
  // // 初始化 websocket
  // //////////////////////////////////////////////////
  let websocketUrl = 'ws://'+ location.host +'/fight';
  let websocket = new WebSocket(websocketUrl)

  websocket.onopen = function () {
    console.log("连接成功");
    
  }

  websocket.close = function () {
    console.log("连接断开");
  }

  websocket.onerror = function () {
    console.log("和服务器的连接出现异常");
  }

  websocket.onmessage = function (event) {
    console.log(typeof event.data);
    console.log(event.data);
    var hand_b = event.data;
    show(hand_b);
    
  }

    //异步提交表单
    function submitForm() {
      var value = $('input:radio:checked').val();
      console.log(value);
      websocket.send(value);
      
    }
    //显示对方的手势
    function show (hand_b){
      var image = document.getElementById('jiazai');
      console.log(hand_b);
    // debugger
    if(hand_b == "1"){
      image.src = "img/jiandao.png";
      console.log("应该显示剪刀");
    }else if(hand_b == "2"){
      image.src = "img/shitou.png";
      console.log("应该显示石头");
    }else if(hand_b == "3"){
      image.src = "img/bu.png";
      console.log("应该显示布");
    }else{
      console.log("应该滚");
    }

    }

  //关闭浏览器断开连接
  window.onbeforeunload = function () {
    websocket.close();
  }








</script>
</body>
</html>